<template>
  <el-popover popper-class="filter-tootip-warp  multi-select-warp" v-model="visible">
    <span slot="reference" style="float:right;cursor: pointer;">
      <i class="el-icon-circle-plus-outline"></i>
    </span>
    <div class="vitural-list">
      <div class="vitural-check-all">
        <input type="checkbox" class="vitural-check-all-origin" v-model="checkAll" />
        <span>All</span>
      </div>
      <div
        ref="vituralBox"
        class="vitural-box"
        :style="{ height: vituralBoxHeight + 'px' }"
        @scroll="scrollList"
      >
        <div
          ref="vituralContainer"
          class="vitural-container"
          :style="{ height: containerHeight + 'px' }"
          @click="handleCheck"
        ></div>
      </div>
    </div>
    <div class="footer-btns border-top" style="padding:5px 10px">
      <el-button
        size="mini"
        @click="
          () => {
            visible = false;
          }
        "
        >重置</el-button
      >
      <el-button
        size="mini"
        type="primary"
        @click="
          () => {
            visible = false;
          }
        "
        >确定</el-button
      >
    </div>
  </el-popover>
</template>
<script>
/**
 * 组件功能
 * 实现大数据高性能渲染
 * 可以进行单选 多选功能   还有选择全部功能 带有气泡弹出功能
 *
 */
let container;
export default {
  data() {
    return {
      boxHeight: 0,
      containerHeight: 0,
      vituralBoxHeight: 300,
      itemIncontainer: {},
      renderlist: [],
      liHeight: 20,
      result: [],
      visible: false
    };
  },
  props: {
    renderNum: {
      type: Number,
      default: 10
    }
  },
  created() {
    this.vituralData.map(item => {});
  },
  mounted() {
    // 初始化基础属性
    this.initContainer();
  },
  methods: {
    initContainer() {
      this.$nextTick(() => {
        container = this.$refs.vituralContainer;
        this.containerHeight = this.liHeight * this.vituralData.length;
        this.vituralBoxHeight = this.renderNum * this.liHeight;
        // 设置渲染数量
        this.setRenderList();
      });
    },
    setRenderList() {
      for (let i = 0; i < this.renderNum; i++) {
        let item = this.createItem(this.vituralData[i], i * this.liHeight, i);
        this.itemIncontainer[i] = item;
        container.appendChild(item);
      }
    },
    handleCheck(e) {
      let isChecked = e.target.checked;
      let sid = e.target.dataset.sid;
      if (sid) {
        if (isChecked) {
          this.result.push(sid);
        } else {
          let index = this.result.findIndex(item => item === sid);
          this.result.splice(index, 1);
        }
      }
    },
    scrollList() {
      // 计算卷上去的li的数量
      let start = Math.floor(this.$refs.vituralBox.scrollTop / this.liHeight);
      // 计算卷上去的和展示出来的li的数量
      let end = Math.ceil(
        (this.$refs.vituralBox.scrollTop + this.vituralBoxHeight) / this.liHeight
      );
      // 根据卷上去的数量和固定展示的li的数量来计算要从总数据的哪个位置开始截取 并截取多少条数据插入到展示列表中
      this.updateRenderList(start, end);
    },
    createItem(text, pos, id) {
      let div = document.createElement('div');
      div.className = 'vitural-item';
      div.innerHTML = `
          <input type="checkbox" data-sid=${id}  class="vitural-list-check" ${
        this.result.indexOf(id + '') !== -1 ? 'checked' : ''
      }>
          <span class="vitural-list-content">${text}</span>
      `;
      div.style.top = pos + 'px';
      return div;
    },
    deleteItem(rowIndexArr) {
      rowIndexArr.forEach(item => {
        container.removeChild(this.itemIncontainer[item]);
        delete this.itemIncontainer[item];
      });
    },
    // 更新展示列表
    updateRenderList(start, end) {
      let rowIndexArr = Object.keys(this.itemIncontainer);
      for (let i = start; i < end; i++) {
        let index = rowIndexArr.indexOf(i.toString());
        if (index !== -1) {
          rowIndexArr.splice(index, 1);
          continue;
        }
        if (end <= this.vituralData.length) {
          let item = this.createItem(this.vituralData[i], i * this.liHeight, i);
          this.itemIncontainer[i] = item;
          container.appendChild(item);
        }
      }
      this.deleteItem(rowIndexArr);
    }
  },
  computed: {
    vituralData: function() {
      let arr = [];
      for (let i = 0; i < 20; i++) {
        arr.push(i);
      }
      return arr;
    },
    checkAll: {
      get() {
        return this.result.length === this.vituralData.length;
      },
      set(value) {
        if (value) {
          this.result = this.vituralData.map(item => item + '');
        } else {
          this.result = [];
        }
        for (const iterator of document.querySelectorAll('.vitural-list-check')) {
          iterator.checked = value;
        }
      }
    }
  }
};
</script>
<style lang="scss">
.vitural-list {
  width: 200px;
  margin: 0 auto;
  .vitural-check-all-origin {
    margin-right: 5px;
  }
  .vitural-box {
    position: relative;
    overflow: auto;

    .vitural-container {
      position: relative;
      width: 100%;
    }
    .vitural-item {
      width: 100%;
      height: 20px;
      position: absolute;
    }
    .vitural-list-check {
      margin-right: 5px;
    }
  }
}
</style>
